<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />

    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

    <script type="text/javascript">
        const siteUrl = "./",
            musicMp3 = "bgm.mp3"
    </script>

    <link rel="stylesheet" type="text/css" href="css/music.css" />
    <link rel="stylesheet" type="text/css" href="css/animate.css" />
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <title>中石化BP 招募体验官</title>
</head>
<body>

    <div class="page question">

        <img class="tips" src="images/rotate_phone_tips.png" alt="">
        <img class="sun-light animated infinite flash" src="images/sun_light_img.png" alt="">
        <div class="car">
            <img class="wheel" src="images/wheel_img.png" alt="" />
            <img class="wheel" src="images/wheel_img.png" alt="" />
        </div>
        <div class="city-box" id="city">
            <img src="images/city_bg.jpg" width="100%" alt="" />
            <img class="city-station" src="images/oil_station_img.png" alt="" />
            <div class="game-tips" id="cityTips">
                <img src="images/game_tips_img.png" width="100%" alt="" />
                <img class="tips-finger" src="images/game_tips_finger.png" alt="" />
            </div>
            <img class="game-click animated infinite pulse slower" src="images/game_click_finger.png" alt="">

            <div class="question-cont" id="que1">
                <div class="question-box">
                    <div class="question-box-title flex">
                        <img class="que-icon" src="images/question_icon1.png" alt="" />
                        <h1>中石化碧辟的品牌在您心中的印象是怎样的?</h1>
                    </div>
                    <div class="question-box-content" id="question1">
                        <label class="question-box-item">
                            <input type="radio" name="impression" id="impression1" />
                            <label for="impression1"></label>
                            <p>和中石化一样</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="impression" id="impression2" />
                            <label for="impression2"></label>
                            <p>和中石化不一样，但不知道具体差别</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="impression" id="impression3" />
                            <label for="impression3"></label>
                            <p>我知道这是中英合资双品牌</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="impression" id="impression4" />
                            <label for="impression4"></label>
                            <p>不是特别清楚</p>
                        </label>
                    </div>
                </div>
                <div class="question-box">
                    <div class="question-box-title flex">
                        <img class="que-icon" src="images/question_icon2.png" alt="" />
                        <h1>您对中石化碧辟品牌的整体形象如何评价？</h1>
                    </div>
                    <div class="question-box-content">
                        <label class="question-box-item">
                            <input type="radio" name="image" id="image1" />
                            <label for="image1"></label>
                            <p>5 非常满意</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="image" id="image2" />
                            <label for="image2"></label>
                            <p>4 比较满意</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="image" id="image3" />
                            <label for="image3"></label>
                            <p>3 一般</p>
                        </label>
                        <div class="question-textarea-box">
                            <label class="question-box-item">
                                <input type="radio" name="image" id="image4" class="hasText" />
                                <label for="image4"></label>
                                <p>2 较不满意(请说明原因，必填）</p>
                            </label>
                            <textarea></textarea>
                        </div>
                        <div class="question-textarea-box">
                            <label class="question-box-item">
                                <input type="radio" name="image" id="image5" class="hasText" />
                                <label for="image5"></label>
                                <p>1 非常不满意(请说明原因，必填）</p>
                            </label>
                            <textarea></textarea>
                        </div>
                    </div>
                </div>
                <!--<div class="question-box">-->
                    <!--<div class="question-box-title flex">-->
                        <!--<img class="que-icon" src="images/question_icon3.png" alt="" />-->
                        <!--<h1>您本次访问的是中石化碧辟哪座油站？</h1>-->
                    <!--</div>-->
                    <!--<div class="question-box-content">-->
                        <!--<div class="input-select-box">-->
                            <!--<h1>大区</h1>-->
                            <!--<div class="select-box">-->
                                <!--<input type="text" placeholder="请选择大区" id="provinceText" />-->
                                <!--<select name="province" id="provinceSelect">-->
                                    <!--<option value="0" style="display: none;" selected="selected"></option>-->
                                    <!--<option value="1">111</option>-->
                                    <!--<option value="2">222</option>-->
                                    <!--<option value="3">333</option>-->
                                <!--</select>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="input-select-box">-->
                            <!--<h1>区域</h1>-->
                            <!--<div class="select-box">-->
                                <!--<input type="text" placeholder="请选择区域" id="areaText" />-->
                                <!--<select name="area" id="areaSelect">-->
                                    <!--<option value="0" style="display: none;" selected="selected"></option>-->
                                    <!--<option value="1">111</option>-->
                                    <!--<option value="2">222</option>-->
                                    <!--<option value="3">333</option>-->
                                <!--</select>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="input-select-box">-->
                            <!--<h1>油站</h1>-->
                            <!--<div class="select-box">-->
                                <!--<input type="text" placeholder="请选择油站" id="stationText" />-->
                                <!--<select name="station" id="stationSelect">-->
                                    <!--<option value="0" style="display: none;" selected="selected"></option>-->
                                    <!--<option value="1">111</option>-->
                                    <!--<option value="2">222</option>-->
                                    <!--<option value="3">333</option>-->
                                <!--</select>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <div class="question-box">
                    <div class="question-box-title flex">
                        <img class="que-icon" src="images/question_icon3.png" alt="" />
                        <h1>您平时多久加一次油？</h1>
                    </div>
                    <div class="question-box-content">
                        <label class="question-box-item">
                            <input type="radio" name="times" id="times1" />
                            <label for="times1"></label>
                            <p>每周4次以上</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="times" id="times2" />
                            <label for="times2"></label>
                            <p>每周2次以上</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="times" id="times3" />
                            <label for="times3"></label>
                            <p>每周1次以上</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="times" id="times4" />
                            <label for="times4"></label>
                            <p>一个月三次</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="times" id="times5" />
                            <label for="times5"></label>
                            <p>一个月两次</p>
                        </label>
                    </div>
                </div>
                <button id="sceneOneSubmit">提交</button>
            </div>
        </div>

        <div class="city-box station" id="station">
            <img class="station-bg" src="images/station_bg.jpg" width="100%" alt="" />
            <img class="station-person animated fadeInRight slow" src="images/station_person.png" alt="">
            <img class="station-car animated slideInLeft slow" src="images/car_img1.png" alt="" />
            <img class="game-click animated infinite pulse slower" src="images/game_click_finger.png" alt="">

            <div class="question-cont" id="que2">
                <div class="question-box">
                    <div class="question-box-title flex">
                        <img class="que-icon" src="images/question_icon1.png" alt="" />
                        <h1>您对本次加油体验的整体满意度是？</h1>
                    </div>
                    <div class="question-box-content">
                        <label class="question-box-item">
                            <input type="radio" name="pleased" id="pleased1" />
                            <label for="pleased1"></label>
                            <p>5 非常满意</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="pleased" id="pleased2" />
                            <label for="pleased2"></label>
                            <p>4 比较满意</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="pleased" id="pleased3" />
                            <label for="pleased3"></label>
                            <p>3 一般</p>
                        </label>
                        <div class="question-textarea-box">
                            <label class="question-box-item">
                                <input type="radio" name="pleased" id="pleased4" class="hasText" />
                                <label for="pleased4"></label>
                                <p>2 较不满意(请说明原因，必填）</p>
                            </label>
                            <textarea></textarea>
                        </div>
                        <div class="question-textarea-box">
                            <label class="question-box-item">
                                <input type="radio" name="pleased" id="pleased5" class="hasText" />
                                <label for="pleased5"></label>
                                <p>1 非常不满意(请说明原因，必填）</p>
                            </label>
                            <textarea></textarea>
                        </div>
                    </div>
                </div>
                <div class="question-box">
                    <div class="question-box-title flex">
                        <img class="que-icon" src="images/question_icon2.png" alt="" />
                        <h1>加油员是否向您介绍油站的增值服务？（如洗车、水果鲜食业务等）</h1>
                    </div>
                    <div class="question-box-content">
                        <label class="question-box-item">
                            <input type="radio" name="introduce" id="introduce1" />
                            <label for="introduce1"></label>
                            <p>是</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="introduce" id="introduce2" />
                            <label for="introduce2"></label>
                            <p>否</p>
                        </label>
                    </div>
                </div>
                <div class="question-box">
                    <div class="question-box-title flex">
                        <img class="que-icon" src="images/question_icon3.png" alt="" />
                        <h1>您是否体验过油站目前提供的增值服务（如有，请选择具体服务项目）</h1>
                    </div>
                    <div class="question-box-content">
                        <label class="question-box-item">
                            <input type="radio" name="experience" id="experience1" class="hasCheck" />
                            <label for="experience1"></label>
                            <p>是</p>
                        </label>
                        <label class="question-box-item check">
                            <input type="checkbox" name="experience" id="experienceItem1" />
                            <label for="experienceItem1"></label>
                            <p>汽服（自助洗车）</p>
                        </label>
                        <label class="question-box-item check">
                            <input type="checkbox" name="experience" id="experienceItem2" />
                            <label for="experienceItem2"></label>
                            <p>水果鲜食</p>
                        </label>
                        <label class="question-box-item check">
                            <input type="checkbox" name="experience" id="experienceItem3" />
                            <label for="experienceItem3"></label>
                            <p>便民服务</p>
                        </label>
                        <label class="question-box-item check">
                            <input type="checkbox" name="experience" id="experienceItem4" />
                            <label for="experienceItem4"></label>
                            <p>代办违章年检等</p>
                        </label>
                        <label class="question-box-item check">
                            <input type="checkbox" name="experience" id="experienceItem5" />
                            <label for="experienceItem5"></label>
                            <p>O2O（积分）兑换</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="experience" id="experience2" />
                            <label for="experience2"></label>
                            <p>否</p>
                        </label>
                    </div>
                </div>
                <div class="question-box">
                    <div class="question-box-title flex">
                        <img class="que-icon" src="images/question_icon4.png" alt="" />
                        <h1>您对油站现有的增值业务如何评价？</h1>
                    </div>
                    <div class="question-box-content">
                        <label class="question-box-item">
                            <input type="radio" name="increment" id="increment1" />
                            <label for="increment1"></label>
                            <p>足够，除了加油什么都不需要</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="increment" id="increment2" />
                            <label for="increment2"></label>
                            <p>刚好满足日常所需</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="increment" id="increment3" />
                            <label for="increment3"></label>
                            <p>太少，还可以增加更多</p>
                        </label>
                    </div>
                </div>
                <div class="question-box">
                    <div class="question-box-title flex">
                        <img class="que-icon" src="images/question_icon5.png" alt="" />
                        <h1>您对油站汽服业务（含自助洗车）的评价如何？</h1>
                    </div>
                    <div class="question-box-content">
                        <label class="question-box-item">
                            <input type="radio" name="serve" id="serve1" />
                            <label for="serve1"></label>
                            <p>方便，快捷，实惠</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="serve" id="serve2" />
                            <label for="serve2"></label>
                            <p>功能全面（冲洗、泡沫、吸尘、消毒等）</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="serve" id="serve3" />
                            <label for="serve3"></label>
                            <p>不方便</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="serve" id="serve4" />
                            <label for="serve4"></label>
                            <p>太贵，不划算</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="serve" id="serve5" />
                            <label for="serve5"></label>
                            <p>未使用过，不清楚</p>
                        </label>
                        <div class="question-textarea-box">
                            <label class="question-box-item">
                                <input type="radio" name="serve" id="serve6" class="hasText" />
                                <label for="serve6"></label>
                                <p>其他感受（请说明，必填）</p>
                            </label>
                            <textarea></textarea>
                        </div>
                    </div>
                </div>
                <button id="sceneTwoSubmit">提交</button>
            </div>
            <div class="game-tips" id="stationTips">
                <img src="images/game_tips_img1.png" width="100%" alt="" />
                <img class="tips-finger" src="images/game_tips_finger.png" alt="">
            </div>
            <!--<img class="door-left" src="images/station_door_left.png" alt="" />-->
            <!--<img class="door-right" src="images/station_door_right.png" alt="" />-->
        </div>

        <div class="city-box store" id="store">
            <img class="clerk-hand animated swing infinite slow" src="images/clerk_hand.png" alt="" />
            <img class="customer-hand animated swing infinite slow" src="images/store_customer_hand.png" alt="" />
            <img class="store-customer" src="images/store_customer.png" alt="">
            <img class="game-click animated infinite pulse slower" src="images/game_click_finger.png" alt="">

            <div class="question-cont" id="que3">
                <div class="question-box">
                    <div class="question-box-title flex">
                        <img class="que-icon" src="images/question_icon1.png" alt="" />
                        <h1>您对油站目前提供的水果和鲜食的整体评价如何？</h1>
                    </div>
                    <div class="question-box-content">
                        <label class="question-box-item">
                            <input type="radio" name="food" id="food1" />
                            <label for="food1"></label>
                            <p>价廉物美</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="food" id="food2" />
                            <label for="food2"></label>
                            <p>品质一般</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="food" id="food3" />
                            <label for="food3"></label>
                            <p>价格太贵</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="food" id="food4" />
                            <label for="food4"></label>
                            <p>无法称重购买，不方便</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="food" id="food5" />
                            <label for="food5"></label>
                            <p>可选择品种太少</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="food" id="food6" />
                            <label for="food6"></label>
                            <p>没买过，不清楚</p>
                        </label>
                        <div class="question-textarea-box">
                            <label class="question-box-item">
                                <input type="radio" name="food" id="food7" class="hasText" />
                                <label for="food7"></label>
                                <p>其他感受（请说明，必填）</p>
                            </label>
                            <textarea></textarea>
                        </div>
                    </div>
                </div>
                <div class="question-box">
                    <div class="question-box-title flex">
                        <img class="que-icon" src="images/question_icon2.png" alt="" />
                        <h1>如油站拟增加现磨咖啡业务，您对此看法如何？</h1>
                    </div>
                    <div class="question-box-content">
                        <label class="question-box-item">
                            <input type="radio" name="coffee" id="coffee1" />
                            <label for="coffee1"></label>
                            <p>很棒！我会去体验</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="coffee" id="coffee2" />
                            <label for="coffee2"></label>
                            <p>无所谓，便宜会买</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="coffee" id="coffee3" />
                            <label for="coffee3"></label>
                            <p>如果咖啡品质好，会考虑选择</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="coffee" id="coffee4" />
                            <label for="coffee4"></label>
                            <p>不感兴趣</p>
                        </label>
                    </div>
                </div>
                <div class="question-box">
                    <div class="question-box-title flex">
                        <img class="que-icon" src="images/question_icon3.png" alt="" />
                        <h1>除以上业务外，您觉得我司油站还能增加哪些商品或服务？</h1>
                    </div>
                    <div class="question-box-content">
                        <label class="question-box-item">
                            <input type="radio" name="new" id="new1" />
                            <label for="new1"></label>
                            <p>餐饮服务</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="new" id="new2" />
                            <label for="new2"></label>
                            <p>休息站（上网、淋浴等）</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="new" id="new3" />
                            <label for="new3"></label>
                            <p>各种自助设备（证件照、打印等）</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="new" id="new4" />
                            <label for="new4"></label>
                            <p>金融服务（ATM存取款等）</p>
                        </label>
                        <label class="question-box-item">
                            <input type="radio" name="new" id="new5" />
                            <label for="new5"></label>
                            <p>O2O兑换</p>
                        </label>
                        <div class="question-textarea-box">
                            <label class="question-box-item">
                                <input type="radio" name="new" id="new6" class="hasText" />
                                <label for="new6"></label>
                                <p>其他，请描述</p>
                            </label>
                            <textarea></textarea>
                        </div>
                    </div>
                </div>
                <div class="question-box">
                    <div class="question-box-title flex">
                        <img class="que-icon" src="images/question_icon4.png" alt="" />
                        <h1>您对我司加油站和便利店还有什么其他意见或建议，请畅所欲言。如能上传照片并说明更佳。</h1>
                    </div>
                    <div class="question-box-content">
                        <div class="question-textarea-box last">
                            <p>请描述</p>
                            <textarea id="advise"></textarea>
                        </div>
                        <div class="upload-cont">
                            <p>上传照片</p>
                            <div class="upload-box flex">
                                <div class="upload-item">
                                    <img src="images/upload_bg.jpg" alt="">
                                    <input type="file" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <button id="sceneLastSubmit">提交</button>
            </div>
        </div>
    </div>

    <div class="pop-bg cross">
        <div class="pop-close-box"></div>

        <div class="pop-box" id="success">
            <div class="pop-box-title-last">
                <h1>问卷已成功提交</h1>
                <p>您可获得</p>
                <h2>10元无门槛油品现金券1张</h2>
            </div>
            <div class="pop-box-content-last">
                <p>最终的金牌体验官将于10个工作日内进行评选</p>
                <p>评选结果将通过公众号【中石化碧辟微油站】</p>
                <p>推文统一公布</p>
            </div>
            <button class="share-btn">邀好友开启智慧之旅</button>
        </div>

        <div class="pop-box" id="warning">
            <p>您有未填写的选项，请全部选择后提交</p>
            <button class="confirm">确认</button>
        </div>

        <img id="share" src="images/share_img.png" alt="">
    </div>

    <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vconsole.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/music.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        // window.vConsole = new window.VConsole({
        //     onReady: function() {
        //         console.log('vConsole is ready.');
        //     },
        // });

        $('textarea').bind('blur',function(){
            setTimeout(function() {
                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
            }, 100);
        });

        $(document).ready(function (e) {
            setTimeout(function () {
                $('.tips').hide();
                $('#cityTips').show();
            },5000);
            $(window).bind('scroll',cityLastFun);
        });

        $('input[type="radio"]').click(function () {
           $('textarea').hide();
           $('#advise').show();
        });

        $('.hasText').click(function () {
            $(this).parent().next('textarea').show();
        });

        var queCanOpen = false;
        $('#sceneOneSubmit').click(function (e) {
            var questonConfirm = 0;
            $('#que1').find("input[type='radio']").each(function () {
                if ($(this).prop("checked")) {
                    if ($(this).hasClass('hasText')){
                        if ($(this).parent().next('textarea').val() == ''){
                            return;
                        }
                    }
                    questonConfirm ++;
                    //console.log(questonConfirm);
                }
            });
            if (questonConfirm < 3){
                $('.pop-bg').show();
                $('#warning').show();
                return;
            }
            $('html,body').animate({ scrollTop: 0 }, 0);
            $('.car').hide();
            $('#city').fadeOut();
            $('#station').fadeIn();
            setTimeout(function () {
                $('.game-click').show();
                queCanOpen = true;
            },2000);
        });

        $('#station').click(function (e) {
            if (queCanOpen){
                queCanOpen = false;
                $('.game-click').hide();
                $('#que2').show();
            }
        });

        $('#store').click(function (e) {
            if (queCanOpen){
                queCanOpen = false;
                $('.game-click').hide();
                $('#que3').show();
            }
        });

        $('#sceneTwoSubmit').click(function (e) {
            var questonConfirm = 0;
            var check = 0;
            $('#que2').find("input[type='radio']").each(function () {
                if ($(this).prop("checked")) {
                    if ($(this).hasClass('hasText')){
                        if ($(this).parent().next('textarea').val() == ''){
                            return;
                        }
                    }
                    if ($(this).hasClass('hasCheck')){
                        $('#que2').find("input[type='checkbox']").each(function () {
                            if ($(this).prop("checked")) {
                                check++
                            }
                        });
                        console.log(check);
                        if (check == 0) return;
                    }
                    questonConfirm ++;
                    //console.log(questonConfirm);
                }
            });
            if (questonConfirm < 5){
                $('.pop-bg').show();
                $('#warning').show();
                return;
            }
            $('#que2').hide();
            $('#station').css('width','25.39rem');
            $('#station').append('<img class="door-left" src="images/station_door_left.png" alt="" /><img class="door-right" src="images/station_door_right.png" alt="" />');
            $(window).bind('scroll',stationLastFun);
            $('html, body').animate({
                scrollTop: $('html, body').height()
            }, 1000);
        });

        $('#sceneLastSubmit').click(function (e) {
            var questonConfirm = 0;
            $('#que3').find("input[type='radio']").each(function () {
                if ($(this).prop("checked")) {
                    if ($(this).hasClass('hasText')){
                        if ($(this).parent().next('textarea').val() == ''){
                            return;
                        }
                    }
                    questonConfirm ++;
                    console.log(questonConfirm);
                }
            });
            if ($('#advise').val() != '') questonConfirm ++;
            if (questonConfirm < 4){
                $('.pop-bg').show();
                $('#warning').show();
                return;
            }
            $('.pop-bg').show();
            $('#success').show();
        });

        $('.share-btn').click(function (e) {
            $('#success').hide();
            $('#share').show();
        });

        $('.pop-close-box').click(function (e) {
            $('.pop-bg').hide();
            $('.pop-box').hide();
            $('#share').hide();
        });
        
        $('.confirm').click(function (e) {
            $('.pop-bg').hide();
            $('.pop-box').hide();
            $('#share').hide();
        });

        $('#city').click(function (e) {
            console.log(queCanOpen);
            if (queCanOpen) {
                queCanOpen = false;
                $('#que1').show();
                $('.game-click').hide();
                $('.sun-light').hide();
                document.body.removeEventListener('touchmove',touchmove,{passive: false});
            }
        });

        $('#provinceSelect').change(function (e) {
            $('#provinceText').val($(this).find('option:selected').html());
        });

        $('#areaSelect').change(function (e) {
            $('#areaText').val($(this).find('option:selected').html());
        });

        $('#stationSelect').change(function (e) {
            $('#stationText').val($(this).find('option:selected').html());
        });
        
        function stationLastFun() {
            if ($(window).scrollTop() + $(window).height() == $(document).height()) {
                console.log('到底了！！');
                $('#stationTips').show();
                document.body.addEventListener('touchmove',touchmove,{passive: false});
                document.body.addEventListener('touchstart',touchstart,{passive: false});
                document.body.addEventListener('touchend',touchend,{passive: false});
                $(window).unbind('scroll',stationLastFun);
            }
        }
        
        function cityLastFun() {
            if ($(window).scrollTop() + $(window).height() == $(document).height()) {
                console.log('到底了！！');
                $('.wheel').addClass('paused');
                queCanOpen = true;
                document.body.addEventListener('touchmove',touchmove,{passive: false});
                $(window).unbind('scroll',cityLastFun);
            }
        }

        var y = 0;
        var newY = 0;
        function touchmove (event) {
            var e = event || window.event;
            var touch = e.touches[0];
            e.preventDefault();
            newY = touch.pageY;
        }

        function touchstart (event) {
            var e = event || window.event;
            var touch = e.touches[0];
            e.preventDefault();
            y = touch.pageY;
        }

        function touchend (event) {
            var e = event || window.event;
            e.preventDefault();
            if (y - newY >= 200){
                $('#stationTips').hide();
                document.body.removeEventListener('touchmove',touchmove,{passive: false});
                document.body.removeEventListener('touchstart',touchstart,{passive: false});
                document.body.removeEventListener('touchend',touchend,{passive: false});

                $('.door-left').addClass('open');
                $('.door-right').addClass('open');
                setTimeout(function (e) {
                    $('#station').addClass('close');
                    setTimeout(function () {
                        $('#station').hide();
                        $('#store').show();
                        $('.game-click').show();
                        queCanOpen = true;
                    },1000);
                },1000);
            }
        }
    </script>
</body>
</html>